<!-- 拼团订单提交页 -->
<template>
	<view class="box-group" :style="{ '--price': vuex_config.price }">
		<sww-wx-address />
		<view class="return_tip" @click="goAddDistri"
			v-if="(vuex_user.type == 1 || vuex_user.type == 3) && (dataForm.free_order == 1 || dataForm.rebate > 0)">
			<view class="re_txt">成为分销商，立即查看收益</view>
			<view>>></view>
		</view>
		<!--      商品信息-->
		<view class="u-p-l-20 u-p-r-20">
			<!--      规格信息-->
			<view class="spec-box u-border-bottom">
				<view class="spec-title">{{ vuex_business.name }}</view>
				<view class="spec-item">
					<view class="img">
						<image :src="dataForm.logo"></image>
					</view>
					<view class="spec_cont">
						<view class="spec-name u-line-1">{{ dataForm.stock_name }}</view>
						<view class="spec-price">
							<view class="price_num">￥{{ $price(dataForm.price) }}</view>
							<view class="buy_num">x {{totalNum}}</view>
						</view>
					</view>
					<!-- <view class="spec-rebate u-border" v-if="$rebate(dataForm.rebate)">返 {{ $price(dataForm.rebate) }}</view> -->
				</view>
			</view>
			<view class="form-box">
				<u-cell-item title="运费" :arrow="false" :value="prodPostage ? `￥${prodPostage}` : '包邮'"></u-cell-item>
				<u-form-item label="备注" :border-bottom="false">
					<u-input class="remark_input" v-model="remark" type="text" maxlength="120" input-align="right"
						height="40" placeholder="请控制在120字以内" />
				</u-form-item>
			</view>
		</view>
		<view class="box">
			<!-- 根据 this.single 判断当前是否是单买价格还是拼团 -->
			<sww-pay-type v-model="dataForm.pay_type" :price="price"></sww-pay-type>
		</view>
		<sww-goods-action>
			<view class="sub-price">
				<text class="">总计：</text>
				<!-- 根据 this.single 判断当前是否是单买价格还是拼团 -->
				<text class="sww-tp">￥{{ $price(price) }}</text>
			</view>
			<view class="sub-btn" @click="onSubmit">提交订单</view>
		</sww-goods-action>
		<sww-login />
	</view>
</template>

<script>
	import {
		payOrder
	} from '@/mixins/payOrder.js';
	import {
		wxConfig
	} from '@/mixins/wxConfig';
	import {
		localPostage
	} from '@/mixins/localPostage';
	export default {
		mixins: [payOrder, wxConfig, localPostage],
		data() {
			return {
				dataForm: {},
				specActItem: {},
				totalNum:0,//上一个页面选择的数量
				prodPostage: 0, //邮费
				groupIndex: false,
			};
		},

		computed: {
			// 判断是否单买
			price() {
				let price = 0
				price = this.dataForm.price * this.totalNum;
				if (this.prodPostage) price += this.prodPostage
				return price
			}
		},
		watch: {
			vuex_address: {
				handler(val) {
					if (val) {
						this.resetPostage()
					}
				},
			}
		},
		onLoad(options) {
			// #ifdef H5
			this.initWxConfig(['chooseWXPay'])
				.then(() => {})
				.catch(() => {});
			// #endif
			this.initPage();
		},
		methods: {
			initPage() {
				let pages = getCurrentPages(); //获取页面栈
				this.dataForm = JSON.parse(JSON.stringify(pages[pages.length - 2].$vm.dataForm)); //获取上个页面的数据
				this.onTransmission(this.dataForm)
				this.groupIndex = pages[pages.length - 2].$vm.groupIndex; //获取上个页面的数据
				this.totalNum = pages[pages.length - 2].$vm.numValue
				// #ifdef  MP-WEIXIN || APP-PLUS
				this.$set(this.dataForm, 'pay_type', '1');
				// #endif

				// #ifdef MP-ALIPAY
				this.$set(this.dataForm, 'pay_type', '7');
				// #endif

				// #ifdef MP-BAIDU
				this.$set(this.dataForm, 'pay_type', '8');
				// #endif

				// #ifdef MP-TOUTIAO
				this.$set(this.dataForm, 'pay_type', '9');
				// #endif

				this.$set(this.dataForm, 'remark', '');
			},
			onTransmission(res) {
				let prodPostage = 0
				let postageObj = this.$getPostage(this.totalNum, res.express_num, res.express_price, res
					.product_freight || [], res.price);
				if (postageObj.price > prodPostage) {
					prodPostage = postageObj.price
				}
				this.prodPostage = prodPostage;
			},
			onSubmit() {
				if (!this.vuex_address) {
					this.$toast('请选择收货地址');
					return;
				}
				let {
					pk_id,
					stock_name,
					pay_type,
					detailed,
					stock_id,
					guid
				} = this.dataForm;
				let params = {
					postage: this.prodPostage ||0,
					coupon_id: 0,
					coupon: 0,
					name: this.vuex_address.name,
					mobile: this.vuex_address.mobile,
					address: this.vuex_address.address,
					remark: this.dataForm.remark,
					total_amount: this.price
				};

				let options = {
					// prodName:this.dataForm.stock_name,
					pay_type,
					order_type: 9,
					orderApi: 'AddOrderTeambuyProduct',
					totalPrice: params.total_amount //总金额
				};
				//拼团
				Object.assign(params, {
					detailed_name: stock_name,
					detailed_price: this.dataForm.price,
					detailed_num: this.totalNum,
					teambuy_id: pk_id
				});

				if (this.groupIndex >= 0) {
					//参团的时候需要传
					let {
						guid
					} = detailed[this.groupIndex];
					params.guid = guid;
				} else {
					//好友分享进来参团的时候调用
					params.guid = guid;
				}
				this.$login().then(() => {
					this._submitOrder(params, options).then(() => {
						if (guid) {
							let pages = getCurrentPages(); //获取页面栈
							pages[pages.length - 2].$vm.dataForm.guid = null;
							pages[pages.length - 2].$vm.guid = null;
						}
					});
				});
			},
			// 重新计算运费
			resetPostage() {
				let prodPostage = 0
				let postageObj = this.$getPostage(1, this.dataForm.express_num, this.dataForm.express_price, this.dataForm
					.product_freight, this.dataForm.price);
				if (postageObj.price > prodPostage) {
					prodPostage = postageObj.price
				}
				this.prodPostage = prodPostage;
			},
			goAddDistri() {
				if (this.vuex_user.type === 1) {
					this.$linkTo('/package/user/user-info/index?type=applyDist');
				} else if (this.vuex_user.type == 3) {
					uni.showModal({
						content: '审核中...',
						showCancel: false
					});
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.prod-box {
		width: 100%;
		padding: 24rpx 0;
	}

	.return_tip {
		background-color: #19be6b;
		color: #fff;
		font-size: 24rpx;
		padding: 8rpx 10rpx;
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
	}

	.box {
		width: 100%;
		padding: 0 24rpx;
		background-color: #ffffff;
		margin-bottom: 10rpx;
	}

	.sub-btn {
		width: 250rpx;
		height: 100rpx;
		background: rgba(233, 51, 36, 1);
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		font-size: 30rpx;
		margin-left: auto;
	}

	.form-box {
		width: 100%;

		::v-deep .u-cell {
			padding: 20rpx 0;
		}

		.form-input {
			width: 100%;
			display: flex;

			textarea {
				width: 100%;
				line-height: 40rpx;
				font-size: 28rpx;
			}
		}
	}

	.sub-price {
		padding-left: 30rpx;
		font-size: 36rpx;
		font-weight: bold;
	}

	.spec-box {
		width: 100%;

		.spec-title {
			width: 100%;
			height: 90rpx;
			display: flex;
			align-items: center;
			font-size: 32rpx;
			font-weight: bold;
		}

		.spec-item {
			width: 100%;
			display: flex;
			font-size: 28rpx;
			padding-bottom: 24rpx;

			.img {
				width: 150rpx;
				height: 150rpx;
				background-color: #f5f5f5;
				margin-right: 20rpx;
			}

			.spec_cont {
				flex: 1;
				overflow: hidden;

				.spec-price {
					margin-top: 30rpx;
					display: flex;
					justify-content: space-between;

					.price_num {
						color: var(--price);
					}

					.buy_num {
						color: #999;
					}
				}
			}

			.spec-rebate {
				min-width: 80rpx;
				height: 40rpx;
				background-color: $sww-theme-color-opacity;
				display: flex;
				align-items: center;
				justify-content: center;
				color: var(--color);
				font-size: 26rpx;
				margin-left: 40rpx;
				border-radius: 6rpx;
				padding: 0 16rpx;

				&::after {
					border-color: $sww-theme-color-opacity;
					border-radius: 12rpx !important;
				}
			}
		}
	}

	.remark_input {
		line-height: 1;
	}
</style>
